import React from 'react'
import PropTypes from 'prop-types'
import {Button, Col, DatePicker, AutoComplete, Form, Input, Row, Select, TimePicker} from 'antd'
import {getTimeDistance} from 'utils'
import moment from 'moment'

const FormItem = Form.Item
const {Option} = Select
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const Filter = ({
                  onFilterChange,
                  handleOnChange,
                  dimension,
                  departments,
                  employees,
                  handleSearch,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                  filter: {
                    belongEmpId,
                    belongDeptId,
                    startTime,
                    endTime,
                  },
                }) => {

  const handleSubmit = () => {
    let fields = getFieldsValue()
    let data = {}
    if (fields.startDay && fields.startHour) {
      data.startTime = `${fields.startDay._d.format('yyyy-MM-dd')} ${fields.startHour._d.format('hh:mm:ss')}`
    }
    if (fields.endDay && fields.endHour) {
      data.endTime = `${fields.endDay._d.format('yyyy-MM-dd')} ${fields.endHour._d.format('hh:mm:ss')}`
    }
    if (fields.dimension === 'employee') {
      data.belongEmpId = fields.belongEmpId
    } else {
      data.belongDeptId = fields.belongDeptId
    }
    onFilterChange(data)
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    fields.startDay = null
    fields.startHour = null
    fields.endDay = null
    fields.endHour = null
    fields.belongEmpId = null
    fields.belongDeptId = null
    fields.dimension = dimension
    setFieldsValue(fields)
    handleSubmit()
  }

  return (
    <div>
      <Row gutter={24}>
        <Col md={18} sm={24}>
          <FormItem {...formItemLayout} labelCol={{span: 4}} label="选择日期">
            <Col span={6} style={{marginRight: 10}}>
              <FormItem style={{marginBottom: 0}}>
                {getFieldDecorator('startDay', {initialValue: startTime ? moment(startTime, 'yyyy-MM-dd') : moment(new Date(), 'yyyy-MM-dd')})(
                  <DatePicker style={{width: '100%'}}/>)}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem style={{marginBottom: 0}}>
                {getFieldDecorator('startHour', {initialValue: startTime ? moment(startTime, 'HH:mm') : moment("00:00", 'HH:mm')})(
                  <TimePicker style={{width: '100%'}} minuteStep={60} format="HH:mm"/>)}
              </FormItem>
            </Col>
            <Col span={1}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={6} style={{marginRight: 10}}>
              <FormItem style={{marginBottom: 0}}>
                {getFieldDecorator('endDay', {initialValue: endTime ? moment(endTime, 'yyyy-MM-dd') : moment(new Date(), 'yyyy-MM-dd')})(
                  <DatePicker style={{width: '100%'}}/>)}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem style={{marginBottom: 0}}>
                {getFieldDecorator('endHour', {initialValue: endTime ? moment(endTime, 'HH:mm') : moment(new Date().getHours() + 1 + ':00', 'HH:mm')})(
                  <TimePicker style={{width: '100%'}} minuteStep={60} format="HH:mm"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col md={12} sm={24}>
          <FormItem {...formItemLayout} labelCol={{span: 6}} label="维度筛选">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('dimension', {initialValue: dimension})(
                  <Select onChange={handleOnChange} style={{width: "100%"}}>
                    <Option value="employee">归属员工</Option>
                    <Option value="deoartment">归属部门</Option>
                  </Select>,
                )}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            {dimension === 'employee' ? (<Col span={11}>
                <FormItem>
                  {getFieldDecorator('belongEmpId', {initialValue: belongEmpId})(
                    <AutoComplete
                      allowClear
                      dataSource={employees.map(item => (<Option key={item.id}>{item.name}</Option>))}
                      style={{width: '100%'}}
                      onSearch={handleSearch}
                      placeholder="请输入工号或者姓名"
                    />,
                  )}
                </FormItem>
              </Col>) :
              (<Col span={11}>
                <FormItem>
                  {getFieldDecorator('belongDeptId', {initialValue: belongDeptId})(
                    <Select allowClear style={{width: '100%'}} placeholder="请选择部门">
                      {departments.map(item => (<Option value={item.id}>{item.name}</Option>))}
                    </Select>,
                  )}
                </FormItem>
              </Col>)}
          </FormItem>
        </Col>

        <Col span={8}>
          <div>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button className="margin-right" onClick={handleFormReset}>重置</Button>
          </div>
        </Col>
      </Row>
    </div>
  )
}

Filter.propTypes = {
  onFilterChange: PropTypes.func,
}
export default Form.create()(Filter)
